var tabpanel;
Ext.onReady(function() {
	// 标签panel
	tabpanel = Ext.create("Ext.tab.Panel", {
		layout : "fit",
		resizeTabs : true,
		enableTabScroll : true,
		width : 600,
		height : 250,
		width : 400,
		height : 400,
		activeTab : 0,
		defaults : {
			autoScroll : true,
			autoScroll : true
		},
		items : [{
			title : "用户信息",
			id : "tab_userinfo",
			contentTitle : "当前地址：深圳交警运维监控建设系统->用户信息",
			closable : false,
			html : "<iframe scrolling='auto' frameborder='0' width='100%' height='100%' src=user/userinfo.jsp></iframe>"

		}]
	});

	// 树的panel
	var treeData = {
		root : {
			children : [{
						text : "用户管理",
						id : "userManager",
						noClick : true,
						children : [{
									text : "用户管理",
									tabId : "tab_userlist",
									url : "user/userlist.jsp",
									contentTitle : "当前地址：深圳交警运维监控建设系统->用户管理",
									leaf : true
								}]
					}, {
						text : "工单管理",
						id : "workOrderManager",
						noClick : true,
						children : [{
									text : "工单管理",
									tabId : "tab_jdbcinfo",
									url : "jdbc/jdbcinfo.jsp",
									leaf : true
								}, {
									text : "类别管理",
									tabId : "tab_jdbcinfo",
									url : "jdbc/jdbcinfo.jsp",
									leaf : true
								}]
					}, {
						text : "监控管理",
						id : "monitorManager",
						noClick : true,
						children : [
									{
									text : "主机管理",
									leaf : true
								},
								{
									text : "服务管理",
									leaf : true
								},
									{
									text : "主机监控",
									leaf : true
								}, {
									text : "虚拟机监控",
									leaf : true
								}, {
									text : "网络监控",
									leaf : true
								}, {
									text : "数据库监控",
									leaf : true
								}]
					}, {
						text : "报表管理",
						id : "reportManager",
						noClick : true,
						children : [{
									text : "工单报表",
									leaf : true
								}, {
									text : "告警报表",
									leaf : true
								}]
					}, {
						text : "日志管理",
						id : "logManager",
						noClick : true,
						children : [{
									text : "工单日志",
									leaf : true
								}, {
									text : "告警日志",
									leaf : true
								}]
					}, {
						text : "系统管理",
						id : "systemManager",
						noClick : true,
						children : [{
									text : "角色管理",
									leaf : true
								}, {
									text : "权限管理",
									leaf : true
								}, {
									text : "级别管理",
									leaf : true
								}]
					}]
		}
	};
	var treeStore = Ext.create("Ext.data.TreeStore", treeData);
	var treePanel = Ext.create("Ext.tree.Panel", {
				id : "tree-panel",
				title : "系统导航",
				region : "north",
				split : true,
				rootVisible : false,// root否可见
				autoScroll : true,
				store : treeStore,
				listeners : {
					itemclick : function(node, record) {
						if (record.raw.noClick) {
							return;
						} else {
							addTab(record.raw.text, record.raw.contentTitle,
									record.raw.tabId, record.raw.url);
						}
					}
				}
			});
	treePanel.expandAll();

	// 主要的布局
	Ext.create("Ext.container.Viewport", {
				layout : "border",
				items : [new Ext.panel.Panel({
									region : "north",
									contentEl : "north",
									collapsible : true,
									border : false,
									title : "深圳交警运维监控建设系统",
									layout : "fit",
									height : 85
								}), {
							layout : "fit",
							region : "south",
							html : "神马都是浮云，你信不信？反正我是信了，"
						}, {
							collapsible : true,
							split : true,
							region : "west",
							width : 300,
							maxWidth : 300,
							title : "系统导航",
							layout : "accordion",
							layoutConfig : {
								animate : true,
								activeOnTop : true
							},
							items : [treePanel]
						}, {
							id : "content-panel",
							region : "center",
							layout : "fit",
							title : "当前地址：深圳交警运维监控建设系统->用户信息",
							items : [tabpanel]
						}],
				renderTo : Ext.getBody()
			});

	// 主题
	var themeButton = new Ext.Button({
				text : "主题",
				iconCls : "themeIcon",
				iconAlign : "left",
				scale : "medium",
				autoWidth : true,
				tooltip : "<span style='font-size:12px''>切换系统主题</span>",
				pressed : true,
				arrowAlign : "right",
				renderTo : "themeDiv"
			});
	// 配置
	var mainMenu = new Ext.menu.Menu({
				id : "mainMenu",
				items : [{
							text : "修改个人设置",
							iconCls : "userIcon",
							handler : function() {
								updateUserInit();
							}
						}]
			});
	var configButton = new Ext.Button({
				text : "首选项",
				iconCls : "config_25_25Icon",
				iconAlign : "left",
				scale : "medium",
				autoWidth : true,
				tooltip : "<span style='font-size:12px'>首选项设置</span>",
				pressed : true,
				renderTo : "configDiv",
				menu : mainMenu
			});

	// 关闭
	var closeButton = new Ext.Button({
		iconCls : "cancel_25_25Icon",
		iconAlign : "left",
		scale : "medium",
		autoWidth : true,
		tooltip : "<span style='font-size:12px'>注销用户</span>",
		pressed : true,
		arrowAlign : "right",
		renderTo : "closeDiv"
			// handler : function() {
			// updateUserInit();
			// }
		});
});

/**
 * 创建节点
 * 
 * @param {}
 *            closable
 */
function addTab(title, contentTitle, tabId, url) {
	var tab = tabpanel.getComponent(tabId);
	if (!tab) {
		tabpanel.add({
			title : title,
			iconCls : "tabs",
			id : tabId,
			closable : true,
			contentTitle:contentTitle,
			layout : "fit",
			listeners : {
				activate : function() {
					Ext.getCmp("content-panel").setTitle(contentTitle)
				},
				beforeclose:function(tab,eOpts){
					Ext.getCmp("content-panel").setTitle(tab.previousSibling().contentTitle);
					return true;
				}
			},
			html : "<iframe scrolling='auto' frameborder='0' width='100%' height='100%' src="
					+ url + "></iframe>"
//			loader : {
//						url : 'tabpaneltest.jsp',
//						autoLoad : true,
//						scripts:true
//			}
		}).show();
	}
	tabpanel.setActiveTab(tab);
}
